<template>
  <view v-if="pageShow" class="contanier">
    <view class="topBar">
      <topCommonTitleBar
        class="title-bar"
        :statePerch="true"
        arrow="black"
        backgroundColor="#fef5d6"
        titleColor="black"
        title="积分明细"
        title-size="36rpx"
        titleWeight="400"
      >
      </topCommonTitleBar>
      <view class="rules" @click="goRules">规则</view>
    </view>
    <!-- 520rpx 定黄色区域不滚动值 -->
    <scroll-view
      class="mt-scroll"
      scroll-y="true"
      style="height: calc(100vh - 130rpx)"
      :refresher-threshold="50"
      :refresher-background="'#F7F7F7'"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refresherrefresh"
      @scrolltolower="loadMore"
      lower-threshold="200"
    >
      <view class="top-area">
        <text
          style="
            font-weight: bold;
            font-size: 80rpx;
            color: #333;
            margin-top: 6rpx;
          "
          >{{ userInfo.money }}</text
        >
        <text style="font-size: 30rpx; color: #9e9e9e">总积分</text>
        <view class="rule" @click="goRecharge"> 充值积分 </view>
      </view>

      <!-- tabs -->
      <view class="tabs">
        <u-tabs
          :list="tabList"
          @click="tabClick"
          lineColor="linear-gradient(90deg, #FED759 0%, #FFF8E1 100%);"
          :current="current"
          :scrollable="false"
          :activeStyle="{
            color: '#333333',
            fontWeight: 'bold',
            fontSize: '44rpx',
          }"
          :inactiveStyle="{
            color: '#333333',
            fontSize: '34rpx',
          }"
        >
        </u-tabs>
      </view>

      <view class="detail-list">
        <view class="list" v-for="(item, index) in detailList" :key="index">
          <view class="list-title">
            <text
              style="font-size: 34rpx; font-weight: 500; color: #333"
              :class="item.money_status == 3 ? 'grey' : ''"
              >{{ item.memo }}</text
            >
            <text
              style="font-size: 24rpx; color: #999; margin-top: 10rpx"
              :class="item.money_status == 3 ? 'grey' : ''"
              >{{ item.createtime }}</text
            >
          </view>
          <view
            :class="
              item.money_status == 3
                ? 'grey'
                : item.money_status == 1
                ? 'red'
                : 'green'
            "
          >
            <text v-if="item.money_status == 1">+</text>
            {{ item.money }}
          </view>
        </view>

        <!-- 空数据 -->
        <view v-if="detailList.length === 0" class="empty-wrap">
          <image
            class="empty-img"
            src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/demand/no-joinList.png"
          >
          </image>
          <text class="tips">暂无数据</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pointsMall/pointsDetail/index"
></script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
